<template>
	<view class="body">
		<view class="swiper">
			<Swiper :list="list4" @click="previewImage" keyName="url" @change="changeSwiper" @fullScreen='fullScreen' radius="0" height="270"
				:circular="true" @paly="paly">
			</Swiper>
			<view class="detail-pagenum" v-if="isPlay">{{current}}/{{list4.length}}</view>
		</view>
		<view class="wid100 bg-white position-absolute"
			style="border-radius: 100rpx 100rpx 0px 0px;top:260px;height: 10px;"></view>
		<view class="px-3 pb-3 wid100 box-b flex flex-column">
			<text class="font-36 fwb cl-21 mb-2" style="padding-top: 20rpx;">{{detail.title}}</text>
			<view>
				<view style="display: flex;flex-wrap: wrap;">
					<view class="flex align-center py-1 px-1 rounded-10 mr-1 mb-1" v-for="(item,index) in detail.labels"
						:key="index" :style="{background:item.color,marginRight:'20rpx'}">
						<text class="font-24" style="color:#fff;">{{item.title}}</text>
					</view>
				</view>
				<view style="display: flex;justify-content: flex-end;align-items: center;">
					<text class="font-24 fw5" style="color: #C40E0E;">{{detail.currency}}</text>
					<text class="font-36 fw5"
						style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{detail.price}}</text>
					<text class="font-24 fw4 cl-88">起 /周</text>
				</view>
			</view>
			<view class="wid100 position-relative mt-2"
				:style="{height:'128rpx',background: '#FBFBFB',borderRadius: '8rpx 8rpx 8rpx 8rpx'}"
				v-for="(item,index) in detail.schools" :key="index" @tap="choiceSchool(index)">
				<block v-if="schoolIndex == index">
					<view @tap.stop="goSchool(item)">
						<image style="height:100%;width:170rpx;" class="z0 position-absolute top-0 right-0"
							src="../../static/activityDetail/location-bg.png" mode=""></image>
						<view class="position-absolute z1 flex flex-column justify-center align-center"
							style="top:24rpx;right:44rpx;" @tap="goMap(item)">
							<image style="width:60rpx;height:60rpx;" src="../../static/activityDetail/5552x.png"
								mode=""></image>
							<text class="font-20 fw4 cl-1f">导航</text>
						</view>
					</view>
				</block>

				<view class="m-2">
					<text class="font-24 fwb cl-44">距 {{item.title}} {{item.distance}}km</text>
				</view>
				<view class="ml-2 flex align-center">
					<view class="flex align-center mr-3" v-if="item.walk_time > 0">
						<image src="../../static/activityDetail/bx.png" style="width: 30rpx;height: 30rpx;"
							class="mr-0_6" mode=""></image>
						<text class="font-24 fw4 cl-92">{{item.walk_time}}分钟</text>
					</view>
					<view class="flex align-center mr-3" v-if="item.ride_time > 0">
						<image src="../../static/activityDetail/qc.png" style="width: 30rpx;height: 30rpx;"
							class="mr-0_6" mode=""></image>
						<text class="font-24 fw4 cl-92">{{item.ride_time}}分钟</text>
					</view>
					<!-- 公交 -->
					<view class="flex align-center mr-3" v-if="item.bus_time > 0">
						<image src="../../static/activityDetail/gj.png" style="width: 30rpx;height: 30rpx;"
							class="mr-0_6" mode=""></image>
						<text class="font-24 fw4 cl-92">{{item.bus_time}}分钟</text>
					</view>
					<!-- 地铁 -->
					<view class="flex align-center mr-3" v-if="item.metro_time > 0">
						<image src="../../static/activityDetail/dt.png" style="width: 25rpx;height: 25rpx;"
							class="mr-0_6" mode=""></image>
						<text class="font-24 fw4 cl-92">{{item.metro_time}}分钟</text>
					</view>
				</view>
			</view>
		</view>

		<block v-if="detail.room_type.length">
			<u-gap height="10" bgColor="#f3f3f3"></u-gap>

			<view id="fjlb" class="flex justify-between mt-3 px-3">
				<text class="font-36 fwb cl-21">房间列表</text>
				<view class="flex align-center" @click="jump({url:`/pages/apartmentDetail/explain?id=${detail.id}`})">
					<image src="../../static/activityDetail/5692x.png"
						style="width:20rpx;height:20rpx;margin-right: 6rpx;" mode=""></image>
					<text class="font-24 fw4 cl-43">房型说明</text>
				</view>
			</view>
			<view class="choice-box">
				<view class="choice-item" v-for="(item,index) in detail.room_type" :key="index"
					:class="{active:checkId == index}" @tap="changeChoice(index)">
					<view>{{item.title}}</view>
				</view>
			</view>

			<view class="flex flex-column px-3 py-3 box-b wid100">
				<view v-for="(room,roomIndex) in detail.room_type[checkId].room" :key="roomIndex"
					class="wid100 p-3 box-b mb-2 flex room-box" @tap.stop="jump({url:`/pages/roomDetail/roomDetail?id=${room.id}`})">
					<image :src="room.thumb" class="rounded-10" style="width: 144rpx;height: 144rpx;" mode="">
					</image>
					<view class="flex-1 ml-2 flex flex-column justify-between" style="height:144rpx;">
						<view class="font-28 fw5 cl-21 lh36 text-ellipsis2">{{room.title}}</view>
						<view class="font-24 fw4 cl-aa u-line-1">{{room.size}}㎡ | {{room.bed}}</view>
						<view class="font-24 fw4 cl-aa" style="padding-top: 5rpx;" v-if="room.lease_text">租期：{{room.lease_text}}</view>
						<view class="flex justify-between align-center">
							<view class="flex align-center">
								<text class="font-24 fw5" style="color: #C40E0E;">{{detail.currency}}</text>
								<text class="font-30 fw5"
									style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{room.price}}</text>
								<text class="font-24 fw4 cl-88">/周</text>
							</view>
							<view class=" py-1 rounded-10 mr-1 mb-1 rounded-30"
								style="background:#FFB24B;width: 140rpx;text-align: center;" v-if="room.state == 1" @tap.stop="toApply(room)">
								<view class="font-24" style="color:#fff;line-height: 24rpx;">立即预订</view>
							</view>
							<view class=" py-1 rounded-10 mr-1 mb-1 rounded-30"
								style="background: #BFBFBF;width: 212rpx;text-align: center;" v-else @tap.stop="toPApply(room)">
								<view class="font-24" style="color:#fff;line-height: 24rpx;">已租满，加入排队</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		
		
		<block v-if="detail.group">
			<u-gap height="10" bgColor="#f3f3f3"></u-gap>
		
			<view  class="flex justify-between mt-3 px-3">
				<text class="font-36 fwb cl-21">拼房列表</text>
				<view class="flex align-center" @click="lookMore">
					<image src=""
						style="width:20rpx;height:20rpx;margin-right: 6rpx;" mode=""></image>
					<text class="font-24 fw4 cl-43">查看更多</text>
				</view>
			</view>
			<view class="community-box"  style="margin-bottom: 20rpx;">
				<view style="display: flex;align-items: center;padding-top: 30rpx;">
					<image :src="detail.group.avatar" mode=""
						style="width: 80rpx;height: 80rpx;border-radius: 50%;" ></image>
					<view style="padding-left: 20rpx;">
						<view>
							<text style="color: #262626;font-size: 28rpx;">{{detail.group.realname}}</text>
							<text style="color: #A7A7A7;font-size: 22rpx;padding-left: 26rpx;">{{detail.group.major}}</text>
						</view>
						<view style="display: flex;padding-top: 10rpx;">
							<view class="label">{{detail.group.label}}</view>
						</view>
					</view>
				</view>
				<view class="remarks">{{detail.group.desc}}</view>
				<view class="condition" v-if="detail.group.gender_require == 0">男女不限 拼{{detail.group.group_person}}人</view>
				<view class="condition" v-if="detail.group.gender_require == 1">限男生 拼{{detail.group.group_person}}人</view>
				<view class="condition" v-if="detail.group.gender_require == 2">限女生 拼{{detail.group.group_person}}人</view>
				<!-- 这个是一个公寓锁定一个房型的 -->
				<view class="building" v-if="detail.group.is_booking == 1">
					<view class="flex align-center" style="padding: 20rpx 0;border-bottom: 1px solid #E5E5E5;">
						<image src="../../static/index/das-icon.png" style="width: 32rpx;height: 32rpx;"></image>
						<view style="flex: 1;color: #202020;font-size: 28rpx;padding-left: 18rpx;">{{detail.group.apartment_title}}</view>
						<image src="../../static/index/zu210-2x.png" style="width: 24rpx;height: 24rpx;"></image>
					</view>
					<view class="flex" style="padding: 26rpx 0;" @tap="jump({url:'/pages/roomDetail/roomDetail?id='+detail.group.room_id})">
						<image :src="detail.group.room.thumb" style="width: 144rpx;height: 144rpx;border-radius: 8px;">
						</image>
						<view style="padding-left: 20rpx;">
							<view class="text-one" style="color: #202020;font-size: 28rpx;width: 400rpx;">{{detail.group.room.title}}</view>
							<view style="color: #ABABAB;font-size: 24rpx;padding: 10rpx 0 20rpx 0;">{{detail.group.room.size}}㎡ | {{detail.group.room.toilet}} |
								{{detail.group.room.bed}}
							</view>
							<view class="flex align-center">
								<text class="font-20 fw5" style="color: #C40E0E;">{{detail.currency}}</text>
								<text class="font-28 fw5"
									style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{detail.group.room.price}}</text>
								<text class="font-20 fw4 cl-88">/周</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 这个是只有意向公寓 -->
				<view class="apartment" v-else>
					<view style="color: #202020;font-weight: bold;font-size: 28rpx;padding-top: 20rpx;">意向公寓</view>
					<view class="apartment-box" v-for="(apartment,apartmentIndex) in detail.group.want_apartment" :key="apartmentIndex"  >
						<view class="flex" style="padding: 20rpx 0;border-bottom: 1px solid #EFEFEF;">
							<image :src="apartment.thumb"
								style="width: 166rpx;height: 106rpx;border-radius: 4px;"></image>
							<view style="padding-left: 20rpx;">
								<view class="text-one" style="color: #141414;font-size: 24rpx;font-weight: bold;line-height: 24rpx;width: 400rpx;">{{apartment.title}}</view>
								<view class="flex align-center" style="padding: 6rpx 0 15rpx 0;width: 400rpx;">
									<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
									<text class="text-one" style="color: #ABABAB;font-size: 20rpx;padding-left: 6rpx;">{{apartment.address}}</text>
								</view>
								<view class="flex align-center">
									<text class="font-20 fw5" style="color: #C40E0E;">{{detail.currency}}</text>
									<text class="font-28 fw5"
										style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{apartment.price}}</text>
									<text class="font-20 fw4 cl-88">起 /周</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-between align-center py-3">
					<view style="color: #A1A1A1;font-size: 28rpx;">发布时间：{{detail.group.createtime_text}}</view>
					<view class="button" @tap="join(detail.group.id)">参与拼房</view>
				</view>
			</view>
		</block>
		

		

		<u-gap height="10" bgColor="#f3f3f3"></u-gap>

		<view class="flex justify-between mt-3 px-3 mb-2">
			<text class="font-36 fwb cl-21">公寓设施</text>
			<text></text>
		</view>
		<view class="wid100 box-b px-3 py-3 flex flex-wrap">
			<view v-for="(item,index) in detail.facilitys" :key="index"
				class="flex flex-column justify-center align-center" style="width:138rpx;">
				<image style="width: 48rpx;height: 48rpx;" :src="item.thumb" mode=""></image>
				<text class="font-26 fw4 cl-9c mt-2 mb-5">{{item.title}}</text>
			</view>
		</view>

		<u-gap height="10" bgColor="#f3f3f3"></u-gap>

		<view class="flex justify-between mt-3 px-3 ">
			<text class="font-36 fwb cl-21">公寓详情</text>
			<text></text>
		</view>
		<view class="text-justify wid100 px-3 py-3 box-b font-26 fw4 cl-74 lh40">
			<text v-for="(itm,idx) in detail.desc" :key="idx" class="font-26 fw4 cl-74 lh40 d-block">{{itm}}</text>
			
		</view>

		<u-gap height="10" bgColor="#f3f3f3"></u-gap>

		<view class="flex justify-between mt-3 px-3 ">
			<text class="font-36 fwb cl-21">退订政策</text>
			<text></text>
		</view>
		<view class="text-justify wid100 px-3 py-3 box-b font-26 fw4 cl-74 lh40">
			<text v-for="(itmm,idxx) in detail.back_policy" :key="idxx" class="font-26 fw4 cl-74 lh40 d-block">{{itmm}}</text>
		</view>
		
		<u-gap height="10" bgColor="#f3f3f3"></u-gap>
		
		<view class=" mt-3 px-3">
			<text class="font-36 fwb cl-21">公寓位置</text>
			<view style="display: flex;align-items: flex-start;padding-top: 30rpx;">
				<image src="../../static/common/localtion.png" mode="" style="width: 30rpx;height: 40rpx;"></image>
				<text style="color: #515151;font-size: 26rpx;font-weight: 400;padding-left: 6rpx;">地址:</text>
				<text
					style="color: #515151;font-size: 24rpx;font-weight: 400;flex: 1;padding-left: 40rpx;">{{detail.address}}</text>
			</view>
		</view>
		<view style="padding: 0 36rpx 40rpx 36rpx;">
			<view class="map">
				<map :markers="markers" id="map" @click="tomap(0)" :longitude="longitude" :latitude="latitude"
					scale="14"></map>
		
				<view class="flex justify-between"
					style="height: 85rpx;line-height: 85rpx;padding-left: 42rpx;padding-right: 42rpx;color: #B7A369;border: #F2F2F2 solid 1rpx;">
					<view @click="tomap(0)">公交</view>
					<view @click="tomap(1)">地铁</view>
					<view @click="tomap(5)">餐饮</view>
					<view @click="tomap(3)">医院</view>
					<view @click="tomap(4)">购物</view>
				</view>
			</view>
			<view class="loaction-address">{{ data.addressinfo }}</view>
		</view>
		
		<u-gap height="80" bgColor="#fff"></u-gap>

		<!-- 底部浮动栏 -->
		<view class="position-fixed bottom-0 bg-white flex justify-between align-center pb-2"
			:style="{width:'750rpx',height:'120rpx',boxShadow: '0px -2rpx 2rpx rgba(84, 84, 84, 0.15)'}">
			<button open-type="contact" hover-class="none" class="flex align-center" style="margin:0;">
				<image src="../../static/common/kefu.png" style="width: 60rpx;height: 60rpx;" class="ml-5" mode="">
				</image>
				<view class="ml-2 flex flex-column align-start">
					<view class="font-28 fw5 cl-44 mb-1">米欧</view>
					<text class="font-24 fw4 cl-a5">租赁客服</text>
				</view>
			</button>
			<view @click="scoreshopExchange" class="flex justify-center align-center rounded-50 mr-3"
				:style="{background:'#FFB24B',width:'280rpx',height:'72rpx',}">
				<text class="font-28 fw4" :style="{color:'#fff'}">立即预定</text>
			</view>
		</view>
		
		<!-- 侧边浮动 -->
		<view class="position-fixed"
			:style="{width:'80rpx',height:'80rpx',bottom: '100px',right:'20px',borderRadius:'50%',overflow:'hidden'}">
			<button open-type="contact" hover-class="none">
				<image src="../../static/common/kefu0.png" style="width: 80rpx;height: 80rpx;" >
				</image>
			</button>
		</view>
		<LoginPop></LoginPop>
	</view>
</template>

<script>
	import Swiper from '../../components/u-swiper/u-swiper.vue'
	export default {
		components: {
			Swiper
		},
		data() {
			return {
				markers:[],
				current: 1,
				isPlay: true,
				list4: [],
				detail: {},
				checkId: 0,
				longitude: '',
				latitude: '',
				schoolIndex: 0
			}
		},
		onLoad(option) {
			console.log(option)
			this.getData(option.id)
		},
		methods: {
			lookMore(){
				
				if (uni.getStorageSync('userInfo').token) {
					uni.navigateTo({
						url:`/pages/apartmentpinfang/apartmentpinfang?id=${this.detail.id}`
					})
				} else {
					this.$store.commit('openPop')
				}
			},
			previewImage() {
						let photoList = this.list4.map(item => {
							return item.url;
						});
						uni.previewImage({
							current: this.current-1,
							urls: photoList
						});
					},
			//用户详情
			toUser(id){
				uni.navigateTo({
					url:`/pages/index/communityUser?id=${id}`
				})
			},
			//参加拼房
			join(id){
				
				if (uni.getStorageSync('userInfo').token) {
					uni.navigateTo({
						url:`/pages/index/participate?id=${id}`
					})
				} else {
					this.$store.commit('openPop')
				}
				

			},
			goMap(item){
				console.log(item)
					uni.openLocation({
						latitude: parseFloat(item.latitude),
						longitude: parseFloat(item.longitude),
						address: item.title,
						name: item.title
					})
				
			},
			scoreshopExchange(){
				console.log('触发锚点')
				            uni.createSelectorQuery().select('#fjlb').boundingClientRect(data=>{//目标位置的节点：类或者id
				                  uni.createSelectorQuery().select(".body").boundingClientRect(res=>{//最外层盒子的节点：类或者id
				                        uni.pageScrollTo({
				                              duration: 100,//过渡时间
				                              scrollTop:data.top - res.top  ,//到达距离顶部的top值
				                        })
				                  }).exec()
				            }).exec();
				
			},
			toApply(item){
				console.log(item)
				
				if (uni.getStorageSync('userInfo').token) {
					uni.navigateTo({
						url:`/pages/roomDetail/apply?id=${item.id}`
					})
				} else {
					this.$store.commit('openPop')
				}
				
				
			},
			toPApply(item){
				console.log(item)
				uni.navigateTo({
					url:`/pages/roomDetail/pApply?id=${item.id}`
				})
			},
			goSchool(item) {
				console.log(item)
			},
			//选择学校
			choiceSchool(index) {
				this.schoolIndex = index
			},
			changeSwiper(e) {				
				this.current = e.detail.__args__[0].current + 1
			},
			fullScreen(e) {
				this.display = e.detail.__args__[0]
			},
			paly(e) {
				this.isPlay = e.detail.__args__[0]
			},
			getData(id) {
				this.$H.post(this.$api.apartment_detail, {
					id: id
				}, {
					token: false
				}).then(res => {					
					this.detail = res.data
					this.longitude = Number(res.data.longitude)
					this.latitude = Number(res.data.latitude)
					
					console.log(this.detail.room_type.length)
					this.markers.push({
					  id: '1',
					  iconPath: '../../static/common/localtion.png',
					  latitude: this.latitude,
					  longitude: this.longitude,
					  title:this.detail.name,
					  width: 30,
					  height: 40
					})
					const swiper = res.data.images.map(item => {
						return {
							url: item
						}
					})
					if (res.data.top_video) {
						this.list4 = [{
							url: res.data.top_video
						}, ...swiper]
					} else {
						this.list4 = [...swiper]
					}

				})
			},
			changeChoice(index) {
				this.checkId = index
			},
			tomap(index) {
				uni.$u.route({
					url: '/pages/apartmentMap/apartmentMap',
					params: {
						index: index,
						longitude: this.longitude,
						latitude: this.latitude
					}
				});
			},
			onShareAppMessage(res) {
			    return {
			        title: this.detail.title,
			        path: '/pages/apartmentDetail/apartmentDetail?id='+this.detail.id
			    }
			},
			//分享到朋友圈
			onShareTimeline(res) {
			    return {
			        title: this.detail.title
			    }
			}
		}
	}
</script>

<style lang="scss">
	button::after{
	 	border: none;
		
	}
	button{
		background-color: #fff;
		padding-left:0;
		padding-right: 0;
		line-height: 1;
	}
	map {
		width: 100%;
		height: 300rpx;
		margin-top: 30rpx;
	}

	page {
		background-color: #fff;


		.swiper {
			position: relative;

			.detail-pagenum {
				position: absolute;
				right: 20rpx;
				bottom: 35rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				border-radius: 20rpx;
				background: rgba(0, 0, 0, 0.3);
				font-size: 24rpx;
				padding: 6rpx 14rpx;
			}
		}

		.room-box {
			background: #FFFFFF;
			box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.08);
			border-radius: 8px 8px 8px 8px;
		}

		.choice-box {
			padding: 50rpx 0 20rpx 0;
			display: flex;
			align-items: center;

			.choice-item {
				padding: 0 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #929292;
				line-height: 24rpx;

				&.active {
					position: relative;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;

					::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 40rpx;
						width: 120rpx;
						height: 16rpx;
						background: linear-gradient(90deg, #FFB24B 0%, rgba(255, 178, 75, 0.05) 100%);
						z-index: -1;
					}
				}
			}
		}

		.act_nav {
			font-size: 28rpx;
			font-weight: 500;
			color: #1C1C1C;
		}

		.nav {
			font-size: 24rpx;
			font-weight: 400;
			color: #404040;
		}

		.red-box {
			width: 100rpx;
			height: 16rpx;
			background: linear-gradient(90deg, #FFB24B 0%, rgba(255, 178, 75, 0.05) 100%);
			margin-top: -15rpx;
		}
	}
	
	
	.community-box {
		padding: 0 30rpx;
		background-color: #fff;
	
		.label {
			padding: 10rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #E99320;
			background: #FFECD2;
			border-radius: 10px 4px 9px 5px;
		}
	
		.remarks {
			padding-top: 36rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #262626
		}
	
		.condition {
			padding: 18rpx 0;
			font-size: 30rpx;
			font-weight: 400;
			color: #A1A1A1;
		}
	
		.building {
			padding: 0 20rpx;
			background: #F9F9F9;
			border-radius: 8px 8px 8px 8px;
		}
	
		.apartment {
			padding: 0 20rpx;
			background: #F9F9F9;
			border-radius: 8px 8px 8px 8px;
		}
	
		.apartment-box:last-child {
			border: none;
		}
	
		.button {
			padding: 20rpx 40rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			background: #FFB24B;
			border-radius: 34px 34px 34px 34px;
		}
	}
</style>
